<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网上书店</title>
<#include "/common/inc_more.html"/>
<link rel="stylesheet" href="/static/ace/assets/css/ace.css" />
<script type="text/javascript">
$.ajaxSetup({
	async : false //取消异步
});
	function checkUserName(){
		var username=$("#username").val();
		var flag=false;
		if(username.length<=0 || username.length>15){
			$("#dFormState").val("1");
			$("#username_state").addClass("ace-icon glyphicon glyphicon-remove");
			$("#username_state").css("color","red");
			$("#username_Error").html("用户名长度必须在1-15之间");
			return flag;
		}
		$.get("/user/validate_username",{username:username},function(data){
			$("#username_state").removeClass();
			if(data.flag==false){
				$("#username_state").addClass("ace-icon glyphicon glyphicon-remove");
				$("#username_state").css("color","red");
				$("#username_Error").html("用户名被使用");
				flag=false;
			}else if(data.flag==true){
				$("#dFormState").val("0");
				$("#username_state").addClass("ace-icon glyphicon glyphicon-ok");
				$("#username_state").css("color","green");
				$("#username_Error").html("");
				flag=true;
			}
		});
		return flag;
	}
	function checkPassword(){
		var password=$("#password").val();
		$("#password_state").removeClass();
		if(password.length<=5 || password.length>15){
			$("#dFormState").val("1");
			$("#password_state").addClass("ace-icon glyphicon glyphicon-remove");
			$("#password_state").css("color","red");
			$("#password_Error").html("密码必须在6-15位之间");
			return false;
		}else{
			$("#dFormState").val("0");
			$("#password_state").addClass("ace-icon glyphicon glyphicon-ok");
			$("#password_state").css("color","green");
			$("#password_Error").html("");
			return true;
		}
	}
	function checkConfirmPassword(){
		var confirmPassword=$("#confirmPassword").val();
		var password=$("#password").val();
		$("#confirmPassword_state").removeClass();
		if(password !=confirmPassword){
			$("#dFormState").val("1");
			$("#confirmPassword_state").addClass("ace-icon glyphicon glyphicon-remove");
			$("#confirmPassword_state").css("color","red");
			$("#confirmPassword_Error").html("两次密码不一致");
			return false;
		}else{
			$("#dFormState").val("0");
			$("#confirmPassword_state").addClass("ace-icon glyphicon glyphicon-ok");
			$("#confirmPassword_state").css("color","green");
			$("#confirmPassword_Error").html("");
			return true;
		}
	}
	function checkTel(){
		var tel=$("#tel").val();
		var reg=/^((0\d{2,3}\d{7,8})|(1[35847]\d{9}))$/;
		$("#tel_state").removeClass();
		if(!reg.test(tel)){
			$("#dFormState").val("1");
			$("#tel_state").addClass("ace-icon glyphicon glyphicon-remove");
			$("#tel_state").css("color","red");
			$("#tel_Error").html("请输入11位有效手机号码");
			return false;
		}else{
			$("#dFormState").val("0");
			$("#tel_state").addClass("ace-icon glyphicon glyphicon-ok");
			$("#tel_state").css("color","green");
			$("#tel_Error").html("");
			return true;
		}
	}
	function checkEmail(){
		var email=$("#email").val();
		var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
		$("#email_state").removeClass();
		if(!reg.test(email)){
			$("#dFormState").val("1");
			$("#email_state").addClass("ace-icon glyphicon glyphicon-remove");
			$("#email_state").css("color","red");
			$("#email_Error").html("请输入有效的邮箱");
			return false;
		}else{
			$("#dFormState").val("0");
			$("#email_state").addClass("ace-icon glyphicon glyphicon-ok");
			$("#email_state").css("color","green");
			$("#email_Error").html("");
			return true;
		}
	}
	function regist(){
		if(!$("#userRule").prop("checked")){
			alert("请勾选勾选用户手册");
			return;
		}
		if(!checkUserName()){
			return;
		}
		if(!checkPassword()){
			return;
		}
		if(!checkConfirmPassword()){
			return;
		}
		if(!checkTel()){
			return;
		}
		if(!checkEmail()){
			return;
		}
		$("#dForm").submit();
	}
</script>
</head>
<body style="margin-left: 25%;margin-right: 25%;background-color: #f6f9fb;height: auto;padding-bottom: 3%;">
	<div class="center">
								<h1>
									<img src="/images/logo.jpg" height="50px;" width="50px;">
									<span class="red">网上书店</span>
								</h1>
								<h4 class="blue" id="id-company-text">&copy;ff's BookShop</h4>
							</div>

							<div class="space-6"></div>

<div class="position-relative">
<div id="signup-box" class="signup-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="ace-icon fa fa-users blue"></i>
												注册
											</h4>

											<div class="space-6"></div>
											<p> 输入注册信息: </p>

											<form action="/user/regist" method="post" id="dForm">
											<input type="hidden" value="1" id="dFormState">
												<fieldset style="padding-left: 20%;padding-right: 5%;">
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>用户名:</span>
															<input type="text" id="username" name="username" placeholder="用户名" style="width:70%;" onblur="checkUserName()"/>
															<span><i id="username_state"></i></span>
														</span>
													</label>
													<label class="block clearfix"><span id="username_Error" style="color: red;font-style: italic;"></span></label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>密&nbsp;&nbsp;码:&nbsp;&nbsp;</span>
															<input id="password" type="password" name="password" placeholder="密码" style="width:70%;" onblur="checkPassword()"/>
															<span><i id="password_state"></i></span>
														</span>
													</label>
													<label class="block clearfix"><span id="password_Error" style="color: red;font-style: italic;"></span></label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>确认密码:</span>
															<input id="confirmPassword" type="password" name="confirmPasswor" placeholder="确认密码" style="width:67%;" onblur="checkConfirmPassword()"/>
															<span><i id="confirmPassword_state"></i></span>
														</span>
													</label>
													<label class="block clearfix"><span id="confirmPassword_Error" style="color: red;font-style: italic;"></span></label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>电&nbsp;&nbsp;话:&nbsp;&nbsp;</span>
															<input type="text" id="tel" name="tel" placeholder="电话" style="width:70%;" maxlength="11" onblur="checkTel()"/>
															<span><i id="tel_state"></i></span>
														</span>
													</label>
													<label class="block clearfix"><span id="tel_Error" style="color: red;font-style: italic;"></span></label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>邮&nbsp;&nbsp;箱:&nbsp;&nbsp;</span>
															<input type="text" id="email" name="email" placeholder="邮箱" style="width:70%;" onblur="checkEmail()"/>
															<span><i id="email_state"></i></span>
														</span>
													</label>
													<label class="block clearfix"><span id="email_Error" style="color: red;font-style: italic;"></span></label>
														<label class="block clearfix">
														<span class="block input-icon input-icon-right" >
															<span>真实姓名:</span>
															<input type="text" name="truename" placeholder="真实姓名" style="width:67%;"/>
														</span>
													</label>
													<br/>
													<label class="block">
														<input type="checkbox" class="ace" id="userRule"/>
														<span class="lbl">
															我接受
															<a href="#">网上书店2018用户手册</a>
														</span>
													</label>

													<div class="space-24"></div>

													<div class="clearfix" style="padding-right: 20%;">
														<button type="reset" class="width-30 pull-left btn btn-sm">
															<i class="ace-icon fa fa-refresh"></i>
															<span class="bigger-110">重置</span>
														</button>

														<button type="button" class="width-30 pull-right btn btn-sm btn-success" onclick="regist()">
															<span class="bigger-110">注册</span>

															<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="/login" data-target="#login-box" class="back-to-login-link">
												<i class="ace-icon fa fa-arrow-left"></i>
												返回登录
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.signup-box -->
								</div>
						
</body>
</html>